<template>
  <div>
      <a-modal
        :title="isView?'查看科研成果':(fromState.id?'编辑科研成果':'添加科研成果')"
        :visible="visible"
        @ok="handleOk"
        @cancel="visible = false"
        class="achievementForm-achievement-form-model"
        :width="1020"
      >
      <a-form :form="form" style="margin-top: 24px;" v-if="visible">
        <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-add">
          <!-- <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  期刊名称
              </span>
              <a-form-item ref="fqkmc" prop="fqkmc" v-if="!isView">
                <a-textarea placeholder="请输入期刊名称" v-model="fromState.fqkmc" :auto-size="{ minRows: 2}"
                v-decorator="[ 'fqkmc', {initialValue:fromState.fqkmc,rules: rules.fqkmc}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fqkmc }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  期刊类别
              </span>
              <a-form-item ref="fqklb" prop="fqklb" v-if="!isView">
                  <a-radio-group v-model="fromState.fqklb"
                  v-decorator="[ 'fqklb', {initialValue:fromState.fqklb,rules: rules.fqklb}]">
                    <a-radio value="核心期刊">
                      核心期刊
                    </a-radio>
                    <a-radio value="非核心期刊">
                      非核心期刊
                    </a-radio>
                  </a-radio-group>
              </a-form-item>
              <span v-else>{{ fromState.fqklb }}</span>
          </a-descriptions-item> -->
          <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  文章内容
              </span>
              <a-form-item ref="fwzmc" prop="fwzmc" v-if="!isView">
                <a-textarea placeholder="请输入文章内容(120字以内)" v-model="fromState.fwzmc" :auto-size="{ minRows: 2}" :maxLength="120"
                v-decorator="[ 'fwzmc', {initialValue:fromState.fwzmc,rules: rules.fwzmc}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fwzmc }}</span>
          </a-descriptions-item>
          <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  发表时间
              </span>
              <a-form-item ref="ffbsj" prop="ffbsj" v-if="!isView">
                  <a-date-picker format="YYYY-MM-DD" @change="ffbsjChange"
                          v-decorator="[ 'ffbsj', {initialValue:fromState.ffbsj,rules: rules.ffbsj}]"/>
              </a-form-item>
              <span v-else>{{ moment(fromState.ffbsj).format('YYYY-MM-DD') }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  文章类别
              </span>
              <a-form-item ref="fwzlx" prop="fwzlx" v-if="!isView">
                  <compSelector
                    :key="compSelectorkey1"
                    :defaultValue="fromState.fwzlx"
                    :compType="typeRadio"
                    class="comp-select-box-a"
                    dictionaryType="文章类型"
                    :height="32"
                    @selectHandleChange="fwzlxChange"
                    v-decorator="[ 'fwzlx', {initialValue:fromState.fwzlx,rules:rules.fwzlx}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fwzlx }}</span>
          </a-descriptions-item>
          <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" >*</span>
                  文章级别
              </span>
              <a-form-item ref="fwzjb" prop="fwzjb" v-if="!isView">
                  <compSelector
                    :key="compSelectorkey2"
                    :defaultValue="fromState.fwzjb"
                    :compType="typeRadio"
                    class="comp-select-box-a"
                    dictionaryType="文章级别"
                    :height="32"
                    @selectHandleChange="fwzjbChange"
                    v-decorator="[ 'fwzjb', {initialValue:fromState.fwzjb,rules:rules.fwzjb}]"/>
              </a-form-item>
              <span v-else>{{ fromState.fwzjb }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-form>
      <template slot="footer">
          <div v-if="!isView">
            <a-button @click="visible = false">取消</a-button>
            <a-button @click="handleOk" class="blue-btn">提交并关闭</a-button>
          </div>
          <div v-else>
              <a-button @click="visible = false" class="blue-btn">关闭</a-button>
          </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import compSelector from '@/components/compSelector/compSelector'
import {typeRadio} from '@/components/compSearchCriteria/ContractType'

import {
  addFbwz,
  editFbwz,
  queryByIdFbwz
} from './service/index'
export default {
  components:{
    compSelector
  },
  data() {
    return {
      moment,
      isView:false,
      visible:false,
      form:this.$form.createForm(this, { name: 'achievementFrom' }),
      fromState:{},
      typeRadio:typeRadio,
      compSelectorkey1: '',
      compSelectorkey2: '',
      rules:{
        fqkmc: [{
            required: true,
            message: '请输入认定内容',
            trigger: 'blur',
        }],
        ffbsj: [{
            type: 'object',
            required: true,
            message: '请选择发表时间',
            trigger: 'blur',
        }],
        fqklb: [{
            required: true,
            message: '请选择期刊类别',
            trigger: 'blur',
        }],
        fwzmc: [{
            required: true,
            message: '请输入文章内容',
            trigger: 'blur',
        }],
        fwzlx: [{
            required: true,
            message: '请输入文章类别',
            trigger: 'blur',
        }],
        fwzjb: [{
            required: true,
            message: '请输入文章级别',
            trigger: 'blur',
        }],
      }
    }
  },
  methods: {
    getData(val,isView){
        this.isView = isView
        if(val.id){
          queryByIdFbwz({id:val.id}).then(res=>{
                if(res.code ==  200){
                    this.fromState = res.result
                    this.fromState.ffbsj = res.result.ffbsj?moment(res.result.ffbsj):''
                }else{
                    this.$message.warning(res.message)
                }
            })
        }else{
            this.fromState = {}
        }
    },
    ffbsjChange(date, dateString){
      //console.log(date, dateString);
      this.fromState.ffbsj = date?moment(date):null
      //console.log(this.fromState.ffbsj)
    },
    fwzlxChange(val){
      this.fromState.fwzlx = val
      this.form.setFieldsValue({
        fwzlx: val,
      });
    },
    fwzjbChange(val){
      this.fromState.fwzjb = val
      this.form.setFieldsValue({
        fwzjb: val,
      });
    },
    handleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    let data = {
                        ...this.fromState,
                        ffbsj:moment(this.fromState.ffbsj).format('YYYY-MM-DD'),
                    }
                    //console.log(data)
                    if(this.fromState.id){
                      editFbwz(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.getData({id:this.fromState.id})
                                this.visible = false
                                this.$emit('successAchievementForm')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                      addFbwz(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.visible = false
                                this.getData({id:res.result.id})
                                this.$emit('successAchievementForm')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                }else{
                }
            })
        },
  },
}
</script>
<style lang="less">
  .achievementForm-achievement-form-model {
    .ant-form-item {
      margin-bottom: 0px;
      textarea.ant-input {
          margin-bottom: 0px;
          height: 46px;
      }
    }
    .ant-descriptions-bordered .ant-descriptions-item-label{
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      background-color:#e6f7ff;
      width: 150px !important;
      text-align: center;
      font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .xhText{
      color: #f5222d;
      line-height: 36px;
      font-size: 21px;
      font-weight: 600;
      height: 30px;
    }
    .descriptions-label-slot{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
